<template>
  <div class="statistics-analysis">
    <!-- 时间选择器 -->
    <el-card class="time-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleDateChange"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="12">
          <el-button-group>
            <el-button :type="timeType === 'week' ? 'primary' : ''" @click="setTimeType('week')">近7天</el-button>
            <el-button :type="timeType === 'month' ? 'primary' : ''" @click="setTimeType('month')">近30天</el-button>
            <el-button :type="timeType === 'quarter' ? 'primary' : ''" @click="setTimeType('quarter')">近3个月</el-button>
            <el-button type="success" icon="el-icon-refresh" @click="refreshData">刷新数据</el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-card>

    <!-- 核心指标概览 -->
    <el-row :gutter="20" class="overview-row">
      <el-col :span="6">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-content">
            <div class="overview-icon user-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="overview-info">
              <h3>{{ (overviewData && overviewData.activeUsers) ? (overviewData.activeUsers | numberFormat) : '0' }}</h3>
              <p>活跃用户</p>
              <span class="growth-rate" :class="(overviewData && overviewData.userGrowth >= 0) ? 'positive' : 'negative'">
                <i :class="(overviewData && overviewData.userGrowth >= 0) ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ overviewData ? Math.abs(overviewData.userGrowth || 0) : 0 }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-content">
            <div class="overview-icon service-icon">
              <i class="el-icon-s-grid"></i>
            </div>
            <div class="overview-info">
              <h3>{{ (overviewData && overviewData.serviceUsage) ? (overviewData.serviceUsage | numberFormat) : '0' }}</h3>
              <p>服务使用量</p>
              <span class="growth-rate" :class="(overviewData && overviewData.serviceGrowth >= 0) ? 'positive' : 'negative'">
                <i :class="(overviewData && overviewData.serviceGrowth >= 0) ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ overviewData ? Math.abs(overviewData.serviceGrowth || 0) : 0 }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-content">
            <div class="overview-icon score-icon">
              <i class="el-icon-trophy"></i>
            </div>
            <div class="overview-info">
              <h3>{{ (overviewData && overviewData.avgScore) ? overviewData.avgScore : '0' }}</h3>
              <p>平均信用分</p>
              <span class="growth-rate" :class="(overviewData && overviewData.scoreGrowth >= 0) ? 'positive' : 'negative'">
                <i :class="(overviewData && overviewData.scoreGrowth >= 0) ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ overviewData ? Math.abs(overviewData.scoreGrowth || 0) : 0 }}分
              </span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-content">
            <div class="overview-icon revenue-icon">
              <i class="el-icon-coin"></i>
            </div>
            <div class="overview-info">
              <h3>¥{{ (overviewData && overviewData.totalRevenue) ? (overviewData.totalRevenue | numberFormat) : '0' }}</h3>
              <p>总收入</p>
              <span class="growth-rate" :class="(overviewData && overviewData.revenueGrowth >= 0) ? 'positive' : 'negative'">
                <i :class="(overviewData && overviewData.revenueGrowth >= 0) ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ overviewData ? Math.abs(overviewData.revenueGrowth || 0) : 0 }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表分析区域 -->
    <el-row :gutter="20" class="charts-row">
      <!-- 用户行为趋势 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <div slot="header" class="chart-header">
            <span>用户行为趋势</span>
            <el-button type="text" @click="refreshUserBehavior">刷新</el-button>
          </div>
          <div ref="userBehaviorChart" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 信用分变化趋势 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <div slot="header" class="chart-header">
            <span>信用分变化趋势</span>
            <el-button type="text" @click="refreshCreditTrend">刷新</el-button>
          </div>
          <div ref="creditTrendChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-row">
      <!-- 服务类型使用分布 -->
      <el-col :span="8">
        <el-card class="chart-card" shadow="hover">
          <div slot="header" class="chart-header">
            <span>服务类型分布</span>
            <el-button type="text" @click="refreshServiceDistribution">刷新</el-button>
          </div>
          <div ref="serviceDistributionChart" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 用户地区活跃度 -->
      <el-col :span="8">
        <el-card class="chart-card" shadow="hover">
          <div slot="header" class="chart-header">
            <span>地区活跃度</span>
            <el-button type="text" @click="refreshRegionActivity">刷新</el-button>
          </div>
          <div ref="regionActivityChart" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 异常数据监控 -->
      <el-col :span="8">
        <el-card class="chart-card" shadow="hover">
          <div slot="header" class="chart-header">
            <span>异常数据监控</span>
            <el-button type="text" @click="refreshAnomalyData">刷新</el-button>
          </div>
          <div class="anomaly-list">
            <div v-for="item in anomalyData" :key="item.id" class="anomaly-item">
              <div class="anomaly-type" :class="getAnomalyTypeClass(item.type)">
                {{ getAnomalyTypeName(item.type) }}
              </div>
              <div class="anomaly-desc">{{ item.description }}</div>
              <div class="anomaly-time">{{ formatTime(item.time) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-row :gutter="30" class="table-row">
      <!-- 用户行为明细 -->
      <el-col :span="22">
        <el-card class="table-card" shadow="hover">
          <div slot="header" class="table-header">
            <span>用户行为明细</span>
            <el-button type="text" @click="exportUserBehavior">导出</el-button>
          </div>
          <el-table :data="userBehaviorData" size="small" max-height="300">
            <el-table-column label="用户ID" prop="userId" width="80" />
            <el-table-column label="用户名" prop="userName" width="100" />
            <el-table-column label="行为类型" prop="actionType" width="120">
              <template slot-scope="scope">
                <el-tag :type="getActionTypeTag(scope.row.actionType)" size="mini">
                  {{ getActionTypeName(scope.row.actionType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="行为描述" prop="description" show-overflow-tooltip />
            <el-table-column label="时间" prop="actionTime" width="160">
              <template slot-scope="scope">
                {{ formatTime(scope.row.actionTime) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 服务使用明细 -->
<!--      <el-col :span="12">-->
<!--        <el-card class="table-card" shadow="hover">-->
<!--          <div slot="header" class="table-header">-->
<!--            <span>服务使用明细</span>-->
<!--            <el-button type="text" @click="exportServiceUsage">导出</el-button>-->
<!--          </div>-->
<!--          <el-table :data="serviceUsageData" size="small" max-height="300">-->
<!--            <el-table-column label="服务名称" prop="serviceName" width="120" show-overflow-tooltip />-->
<!--            <el-table-column label="使用次数" prop="usageCount" width="100" align="center" />-->
<!--            <el-table-column label="用户数" prop="userCount" width="80" align="center" />-->
<!--            <el-table-column label="收入" prop="revenue" width="100" align="center">-->
<!--              <template slot-scope="scope">-->
<!--                ¥{{ scope.row.revenue }}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="增长率" prop="growthRate" width="100" align="center">-->
<!--              <template slot-scope="scope">-->
<!--                <span :class="scope.row.growthRate >= 0 ? 'text-success' : 'text-danger'">-->
<!--                  {{ scope.row.growthRate >= 0 ? '+' : '' }}{{ scope.row.growthRate }}%-->
<!--                </span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDetailedStats, getUserBehaviorAnalysis, getServiceUsageAnalysis, getCreditScoreTrend, getAnomalyData } from '@/api/credit/admin'

export default {
  name: 'CreditStatisticsAnalysis',
  data() {
    return {
      // 时间相关
      dateRange: [],
      timeType: 'week',

      // 概览数据
      overviewData: {
        activeUsers: 0,
        userGrowth: 0,
        serviceUsage: 0,
        serviceGrowth: 0,
        avgScore: 0,
        scoreGrowth: 0,
        totalRevenue: 0,
        revenueGrowth: 0
      },

      // 异常数据
      anomalyData: [],

      // 表格数据
      userBehaviorData: [],
      serviceUsageData: [],

      // 图表实例
      userBehaviorChart: null,
      creditTrendChart: null,
      serviceDistributionChart: null,
      regionActivityChart: null
    }
  },

  filters: {
    numberFormat(value) {
      if (!value) return '0'
      return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    }
  },

  mounted() {
    this.initTimeRange()
    this.initCharts()
    this.loadAllData()
  },

  beforeDestroy() {
    this.destroyCharts()
  },

  methods: {
    // 初始化时间范围
    initTimeRange() {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)

      this.dateRange = [
        start.toISOString().split('T')[0],
        end.toISOString().split('T')[0]
      ]
    },

    // 设置时间类型
    setTimeType(type) {
      this.timeType = type
      const end = new Date()
      const start = new Date()

      switch (type) {
        case 'week':
          start.setDate(start.getDate() - 7)
          break
        case 'month':
          start.setDate(start.getDate() - 30)
          break
        case 'quarter':
          start.setDate(start.getDate() - 90)
          break
      }

      this.dateRange = [
        start.toISOString().split('T')[0],
        end.toISOString().split('T')[0]
      ]

      this.loadAllData()
    },

    // 处理日期变化
    handleDateChange() {
      this.loadAllData()
    },

    // 初始化图表
    initCharts() {
      this.$nextTick(() => {
        this.userBehaviorChart = echarts.init(this.$refs.userBehaviorChart)
        this.creditTrendChart = echarts.init(this.$refs.creditTrendChart)
        this.serviceDistributionChart = echarts.init(this.$refs.serviceDistributionChart)
        this.regionActivityChart = echarts.init(this.$refs.regionActivityChart)

        window.addEventListener('resize', this.handleResize)
      })
    },

    // 销毁图表
    destroyCharts() {
      if (this.userBehaviorChart) this.userBehaviorChart.dispose()
      if (this.creditTrendChart) this.creditTrendChart.dispose()
      if (this.serviceDistributionChart) this.serviceDistributionChart.dispose()
      if (this.regionActivityChart) this.regionActivityChart.dispose()

      window.removeEventListener('resize', this.handleResize)
    },

    // 处理窗口大小变化
    handleResize() {
      this.$nextTick(() => {
        if (this.userBehaviorChart) this.userBehaviorChart.resize()
        if (this.creditTrendChart) this.creditTrendChart.resize()
        if (this.serviceDistributionChart) this.serviceDistributionChart.resize()
        if (this.regionActivityChart) this.regionActivityChart.resize()
      })
    },

    // 加载所有数据
    async loadAllData() {
      try {
        await Promise.all([
          this.loadOverviewData(),
          this.loadUserBehaviorChart(),
          this.loadCreditTrendChart(),
          this.loadServiceDistributionChart(),
          this.loadRegionActivityChart(),
          this.loadAnomalyData(),
          this.loadTableData()
        ])
      } catch (error) {
        this.$message.error('加载数据失败')
      }
    },

    // 加载概览数据
    async loadOverviewData() {
      try {
        const response = await getDetailedStats(this.dateRange ? this.dateRange.join(',') : null)
        // 后端返回 { overview: {...}, regionActivity: [...] }
        const overview = response.data && response.data.overview ? response.data.overview : {}
        this.overviewData = {
          activeUsers: overview.activeUsers || 0,
          userGrowth: overview.userGrowth || 0,
          serviceUsage: overview.totalServices || 0, // 注意字段名
          serviceGrowth: overview.serviceGrowth || 0,
          avgScore: overview.avgCreditScore || 0,    // 注意字段名
          scoreGrowth: overview.scoreGrowth || 0,
          totalRevenue: overview.totalRevenue || 0,
          revenueGrowth: overview.revenueGrowth || 0
        }
      } catch (error) {
        console.error('加载概览数据失败:', error)
        this.overviewData = {
          activeUsers: 0,
          userGrowth: 0,
          serviceUsage: 0,
          serviceGrowth: 0,
          avgScore: 0,
          scoreGrowth: 0,
          totalRevenue: 0,
          revenueGrowth: 0
        }
      }
    },

    // 加载用户行为图表
    async loadUserBehaviorChart() {
      try {
        const response = await getUserBehaviorAnalysis({ dateRange: this.dateRange })
        const data = response.data || {}

        const option = {
          title: {
            text: '用户行为趋势',
            left: 'center',
            textStyle: { fontSize: 14 }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' }
          },
          legend: {
            bottom: 0,
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: data.categories || []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '登录次数',
              type: 'line',
              data: data.loginData || [],
              smooth: true,
              lineStyle: { color: '#409EFF' },
              itemStyle: { color: '#409EFF' }
            },
            {
              name: '服务使用',
              type: 'line',
              data: data.serviceData || [],
              smooth: true,
              lineStyle: { color: '#67C23A' },
              itemStyle: { color: '#67C23A' }
            },
            {
              name: '任务完成',
              type: 'line',
              data: data.taskData || [],
              smooth: true,
              lineStyle: { color: '#E6A23C' },
              itemStyle: { color: '#E6A23C' }
            }
          ]
        }

        if (this.userBehaviorChart) {
          this.userBehaviorChart.setOption(option)
        }
      } catch (error) {
        console.error('加载用户行为图表失败:', error)
      }
    },

    // 加载信用分趋势图表
    async loadCreditTrendChart() {
      try {
        const response = await getCreditScoreTrend({ dateRange: this.dateRange })
        const data = response.data || {}

        const option = {
          title: {
            text: '信用分变化趋势',
            left: 'center',
            textStyle: { fontSize: 14 }
          },
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              let result = params[0].name + '<br/>'
              params.forEach(item => {
                result += item.marker + item.seriesName + '：' + item.value + '分<br/>'
              })
              return result
            }
          },
          legend: {
            bottom: 0,
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: data.categories || []
          },
          yAxis: {
            type: 'value',
            min: 600,
            max: 850
          },
          series: [
            {
              name: '平均信用分',
              type: 'line',
              data: data.avgScoreData || [],
              smooth: true,
              lineStyle: { color: '#F56C6C' },
              itemStyle: { color: '#F56C6C' },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [
                    { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
                    { offset: 1, color: 'rgba(245, 108, 108, 0.1)' }
                  ]
                }
              }
            },
            {
              name: '最高信用分',
              type: 'line',
              data: data.maxScoreData || [],
              smooth: true,
              lineStyle: { color: '#909399' },
              itemStyle: { color: '#909399' }
            }
          ]
        }

        if (this.creditTrendChart) {
          this.creditTrendChart.setOption(option)
        }
      } catch (error) {
        console.error('加载信用分趋势图表失败:', error)
      }
    },

    // 加载服务分布图表
    async loadServiceDistributionChart() {
      try {
        const response = await getServiceUsageAnalysis({ dateRange: this.dateRange })
        const data = response.data || {}

        // 生成默认的服务分布数据
        const defaultData = [
          { name: '家政清洁', value: 35 },
          { name: '维修服务', value: 25 },
          { name: '租赁服务', value: 20 },
          { name: '回收服务', value: 15 },
          { name: '咨询服务', value: 5 }
        ]

        // 转换后端数据格式为前端需要的格式
        const chartData = (data.distribution || defaultData).map(item => ({
          name: item.serviceName || item.name,
          value: item.percentage || item.value
        }))

        const option = {
          title: {
            text: '服务类型分布',
            left: 'center',
            textStyle: { fontSize: 14 }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            bottom: 0,
            left: 'center'
          },
          series: [{
            name: '服务类型',
            type: 'pie',
            radius: '60%',
            data: chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }

        if (this.serviceDistributionChart) {
          this.serviceDistributionChart.setOption(option)
        }
      } catch (error) {
        console.error('加载服务分布图表失败:', error)
      }
    },

    // 加载地区活跃度图表
    async loadRegionActivityChart() {
      try {
        const response = await getDetailedStats(this.dateRange)
        const data = response.data || {}

        // 生成默认的地区活跃度数据
        const defaultData = [
          { name: '北京', value: 25 },
          { name: '上海', value: 20 },
          { name: '广州', value: 15 },
          { name: '深圳', value: 12 },
          { name: '杭州', value: 10 },
          { name: '其他', value: 18 }
        ]

        // 确保数据是数组格式
        let chartData = defaultData
        if (data.regionActivity && Array.isArray(data.regionActivity)) {
          chartData = data.regionActivity.map(item => ({
            name: item.region || item.name || '未知',
            value: item.percentage || item.value || 0
          }))
        } else if (data.regionActivity && typeof data.regionActivity === 'object') {
          // 如果是对象格式，转换为数组
          chartData = Object.keys(data.regionActivity).map(key => ({
            name: key,
            value: data.regionActivity[key] || 0
          }))
        }

        const option = {
          title: {
            text: '地区活跃度',
            left: 'center',
            textStyle: { fontSize: 14 }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}%'
          },
          legend: {
            bottom: 0,
            left: 'center'
          },
          series: [{
            name: '活跃度',
            type: 'pie',
            radius: ['30%', '60%'],
            data: chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }

        if (this.regionActivityChart) {
          this.regionActivityChart.setOption(option)
        }
      } catch (error) {
        console.error('加载地区活跃度图表失败:', error)
      }
    },

    // 加载异常数据
    async loadAnomalyData() {
      try {
        const response = await getAnomalyData({ dateRange: this.dateRange })
        this.anomalyData = response.data || []
      } catch (error) {
        console.error('加载异常数据失败:', error)
        this.anomalyData = []
      }
    },

    // 加载表格数据
    async loadTableData() {
      try {
        const [behaviorResponse, usageResponse] = await Promise.all([
          getUserBehaviorAnalysis({ dateRange: this.dateRange, detail: true }),
          getServiceUsageAnalysis({ dateRange: this.dateRange, detail: true })
        ])

        this.userBehaviorData = (behaviorResponse.data && behaviorResponse.data.details) || []
        this.serviceUsageData = (usageResponse.data && usageResponse.data.details) || []
      } catch (error) {
        console.error('加载表格数据失败:', error)
        this.userBehaviorData = []
        this.serviceUsageData = []
      }
    },

    // 刷新数据
    refreshData() {
      this.loadAllData()
      this.$message.success('数据已刷新')
    },

    // 刷新用户行为数据
    refreshUserBehavior() {
      this.loadUserBehaviorChart()
    },

    // 刷新信用分趋势
    refreshCreditTrend() {
      this.loadCreditTrendChart()
    },

    // 刷新服务分布
    refreshServiceDistribution() {
      this.loadServiceDistributionChart()
    },

    // 刷新地区活跃度
    refreshRegionActivity() {
      this.loadRegionActivityChart()
    },

    // 刷新异常数据
    refreshAnomalyData() {
      this.loadAnomalyData()
    },

    // 导出用户行为数据
    exportUserBehavior() {
      this.$message.info('用户行为数据导出功能开发中...')
    },

    // 导出服务使用数据
    exportServiceUsage() {
      this.$message.info('服务使用数据导出功能开发中...')
    },

    // 获取异常类型样式
    getAnomalyTypeClass(type) {
      const classMap = {
        'warning': 'anomaly-warning',
        'error': 'anomaly-error',
        'info': 'anomaly-info'
      }
      return classMap[type] || 'anomaly-info'
    },

    // 获取异常类型名称
    getAnomalyTypeName(type) {
      const nameMap = {
        'warning': '警告',
        'error': '错误',
        'info': '信息'
      }
      return nameMap[type] || '未知'
    },

    // 获取行为类型标签
    getActionTypeTag(type) {
      const tagMap = {
        'login': 'primary',
        'service': 'success',
        'task': 'warning',
        'other': 'info'
      }
      return tagMap[type] || 'info'
    },

    // 获取行为类型名称
    getActionTypeName(type) {
      const nameMap = {
        'login': '登录',
        'service': '服务使用',
        'task': '任务完成',
        'other': '其他'
      }
      return nameMap[type] || '未知'
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      return this.parseTime(time, '{y}-{m}-{d} {h}:{i}')
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-analysis {
  padding: 20px;

  .time-card {
    margin-bottom: 20px;
  }

  .overview-row {
    margin-bottom: 20px;
  }

  .overview-card {
    .overview-content {
      display: flex;
      align-items: center;
      padding: 10px;

      .overview-icon {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        i {
          font-size: 24px;
          color: white;
        }

        &.user-icon {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        &.service-icon {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        &.score-icon {
          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        &.revenue-icon {
          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
      }

      .overview-info {
        flex: 1;

        h3 {
          margin: 0 0 5px 0;
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }

        p {
          margin: 0 0 5px 0;
          color: #909399;
          font-size: 14px;
        }

        .growth-rate {
          font-size: 12px;

          &.positive {
            color: #67C23A;
          }

          &.negative {
            color: #F56C6C;
          }

          i {
            margin-right: 2px;
          }
        }
      }
    }
  }

  .charts-row, .table-row {
    margin-bottom: 20px;
  }

  .chart-card, .table-card {
    .chart-header, .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .chart-container {
      height: 300px;
    }
  }

  .anomaly-list {
    height: 300px;
    overflow-y: auto;

    .anomaly-item {
      padding: 10px;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .anomaly-type {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        margin-bottom: 5px;

        &.anomaly-warning {
          background-color: #fdf6ec;
          color: #e6a23c;
        }

        &.anomaly-error {
          background-color: #fef0f0;
          color: #f56c6c;
        }

        &.anomaly-info {
          background-color: #f4f4f5;
          color: #909399;
        }
      }

      .anomaly-desc {
        color: #606266;
        font-size: 14px;
        margin-bottom: 5px;
      }

      .anomaly-time {
        color: #909399;
        font-size: 12px;
      }
    }
  }

  .text-success {
    color: #67C23A;
  }

  .text-danger {
    color: #F56C6C;
  }
}
</style>
